<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/motion.css"/>
	</head>
	<body>
		<div class="filt">
            <div class="tile">
                <h2 class="tile-title">选择条件</h2>
                <div class="p-10" id="condition">
                    <table border="0" style="width:100%;">
                        <tbody>
                        <tr>
                            <td style="width: 72px;" class="formLabelStyle">性别</td>
                            <td style="width: 200px;">
                                <table style="width:98%;">
                                    <tbody><tr>
                                        <td colspan="2" style="width:15%;">
                                            <div role="sex">
                                                <a href="javascript:void(0);">
                                                    <img soperpic="1" src="">
                                                    <span soperid="1" style="color: #fff;">男</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="width:15%;">
                                            <div role="sex">
                                                <a href="javascript:void(0);">
                                                    <img soperpic="0" src="">
                                                    <span soperid="0" style="color:#fff;">女</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="width:15%;">
                                            <div role="sex">
                                                <a href="javascript:void(0);">
                                                    <img soperpic="2" src="" style="color: rgb(255,2移动2,0);">
                                                    <span soperid="2" style="color:rgb(255, 232, 0);">全选</span>
                                                </a>
                                            </div>
                                        </td>
                                       <td colspan="1"></td>
                                    </tr>
                                </tbody></table>
                            </td>
                            <td style="width: 72px;" class="formLabelStyle">年龄</td>
                            <td style="width: 800px;">
                                <table style="width:98%;">
                                    <tbody><tr>
                                        <td colspan="1" style="width:10%;">
                                            <div role="age">
                                                <a href="javascript:void(0);">
                                                    <img doperpic="1" src="">
                                                    <span doperid="1" style="color: #fff;">0-5</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="1" style="width:10%;">
                                            <div role="age">
                                                <a href="javascript:void(0);">
                                                    <img doperpic="2" src="" style="color: rgb(255,232,0);">
                                                    <span doperid="2" style="color:#fff;">6-13</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="1" style="width:10%;">
                                            <div role="age">
                                                <a href="javascript:void(0);">
                                                    <img doperpic="3" src="" style="color: rgb(255,232,0);">
                                                    <span doperid="3" style="color: #fff;">14-17</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="1" style="width:10%;">
                                            <div role="age">
                                                <a href="javascript:void(0);">
                                                    <img doperpic="4" src="" style="color: rgb(255,232,0);">
                                                    <span doperid="4" style="color:#fff;">18-25</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan=1 style="width:10%;">
                                           <div role="age">
                                               <a href="javascript:void(0);">
                                                   <img doperpic="5" style="COLOR: rgb(255,232,0);">
                                                   <span doperid="5" style="color:#fff;">26-35</span>
                                               </a>
                                           </div>
                                       </td>
                                        <td colspan=1 style="width:10%;">
                                           <div role="age">
                                               <a href="javascript:void(0);">
                                                   <img doperpic="6" style="COLOR: rgb(255,232,0);">
                                                   <span doperid="6" style="color:#fff;">36-49</span>
                                               </a>
                                           </div>
                                       </td>
                                        <td colspan=1 style="width:10%;">
                                           <div role="age">
                                               <a href="javascript:void(0);">
                                                   <img doperpic="7" style="COLOR: rgb(255,232,0);">
                                                   <span doperid="7" style="color:#fff;">50-64</span>
                                               </a>
                                           </div>
                                       </td>
                                        <td colspan=1 style="width:10%;">
                                           <div role="age">
                                               <a href="javascript:void(0);">
                                                   <img doperpic="8" style="COLOR: rgb(255,232,0);">
                                                   <span doperid="8" style="color:#fff;">64+</span>
                                               </a>
                                           </div>
                                       </td>
                                       <td colspan=1 style="width:10%;">
                                           <div role="age">
                                               <a href="javascript:void(0);">
                                                   <img doperpic="100" style="COLOR: rgb(255,232,0);">
                                                   <span doperid="100" style="color:rgb(255, 232, 0);">100</span>
                                               </a>
                                           </div>
                                       </td>
                                    </tr>
                                </tbody>
                                </table>
                            </td>
                        </tr>
                         <tr>
                            <td colspan="4" style="padding: 10px 0px">
                                <hr class="whiter">
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 72px;" valign="top" class="formLabelStyle">
                                省份
                            </td>
                            <td colspan="4">
                                <table style="width:98%;">
                                    <tbody>
                                    <tr>
                                        <td colspan="2" style="text-align: left;color:rgba(249, 241, 241, 0.87);font-size:14px;">东北地区</td>
                                        <td colspan="3" style="text-align: left;color:rgba(249, 241, 241, 0.87);font-size:14px;">华北地区</td>
                                        <td colspan="4" style="text-align: left;color:rgba(249, 241, 241, 0.87);font-size:14px;">华东地区</td>
                                        <td colspan="2" style="text-align: left;color:rgba(249, 241, 241, 0.87);font-size:14px;">华中地区</td>
                                        <td colspan="2" style="text-align: left;color:rgba(249, 241, 241, 0.87);font-size:14px;">华南地区</td>
                                        <td colspan="3" style="text-align: left;color:rgba(249, 241, 241, 0.87);font-size:14px;">西南地区</td>
                                        <td colspan="3" style="text-align: left;color:rgba(249, 241, 241, 0.87);font-size:14px;">西北地区</td>
                                    </tr>
                                    <tr>
                                        <!-- 东北地区 -->
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="辽宁" class="cityAble">辽宁</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="吉林" class="cityAble">吉林</div>
                                                </a>
                                            </div>
                                        </td>

                                        <!-- 华北地区 -->
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="北京" class="cityAble">北京</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="天津" class="cityAble">天津</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="河北" class="cityAble">河北</div>
                                                </a>
                                            </div>
                                        </td>


                                        <!-- 华东地区 -->
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="上海" class="cityAble">上海</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="江苏" class="cityAble">江苏</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="浙江" class="cityAble">浙江</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="安徽" class="cityAble">安徽</div>
                                                </a>
                                            </div>
                                        </td>


                                        <!-- 华中地区 河南，湖北，湖南 -->
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="河南" class="cityAble">河南</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="湖北" class="cityAble">湖北</div>
                                                </a>
                                            </div>
                                        </td>
                                        <!-- 华南地区 广东，广西，海南 -->
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="广东" class="cityAble">广东</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="广西" class="cityAble">广西</div>
                                                </a>
                                            </div>
                                        </td>
                                        <!-- 西南地区 重庆，四川，贵州，云南，西藏 -->
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="重庆" class="cityAble">重庆</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="四川" class="cityAble">四川</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="贵州" class="cityAble">贵州</div>
                                                </a>
                                            </div>
                                        </td>

                                        <!-- 西北地区 陕西，甘肃，青海，宁夏，新疆-->
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="陕西" class="cityAble">陕西</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="甘肃" class="cityAble">甘肃</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="青海" class="cityAble">青海</div>
                                                </a>
                                            </div>
                                        </td>

                                    </tr>
                                    <tr>
                                        <!-- 东北地区 -->

                                        <td colspan="2" style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="黑龙江" class="cityAble">黑龙江</div>
                                                </a>
                                            </div>
                                        </td>

                                        <!-- 华北地区 -->

                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="山西" class="cityAble">山西</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="内蒙古" class="cityAble">内蒙古</div>
                                                </a>
                                            </div>
                                        </td>

                                        <!-- 华东地区 -->

                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="福建" class="cityAble">福建</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="江西" class="cityAble">江西</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="山东" class="cityAble">山东</div>
                                                </a>
                                            </div>
                                        </td>

                                        <!-- 华中地区 河南，湖北，湖南 -->

                                        <td colspan="2" style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="湖南" class="cityAble">湖南</div>
                                                </a>
                                            </div>
                                        </td>
                                        <!-- 华南地区 广东，广西，海南 -->

                                        <td colspan="2" style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="海南" class="cityAble">海南</div>
                                                </a>
                                            </div>
                                        </td>
                                        <!-- 西南地区 重庆，四川，贵州，云南，西藏 -->

                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="云南" class="cityAble">云南</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="text-align: left;border-right: 0px solid #ddd;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="西藏" class="cityAble">西藏</div>
                                                </a>
                                            </div>
                                        </td>
                                        <!-- 西北地区 陕西，甘肃，青海，宁夏，新疆-->

                                        <td style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="宁夏" class="cityAble">宁夏</div>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="text-align: left;">
                                            <div role="city">
                                                <a href="javascript:void(0);">
                                                    <div geoid="新疆" class="cityAble">新疆</div>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody></table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4" style="padding: 10px 0px">
                                <hr class="whiter">
                            </td>
                        </tr>
                       <!-- <tr>
                            <td style="width: 72px;" class="formLabelStyle">运动数据</td>
                            <td style="width: 320px;">
                                <table style="width:98%;">
                                    <tbody><tr>
                                        <td colspan="2" style="width:15%;">
                                            <div role="move">
                                                <a href="javascript:void(0);">
                                                    <img soperpic="跑步距离" src="">
                                                    <span soperid="跑步距离" style="color: rgb(255, 232, 0);">跑步距离</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="width:15%;">
                                            <div role="move">
                                                <a href="javascript:void(0);">
                                                    <img soperpic="走路距离" src="">
                                                    <span soperid="走路距离" style="color:#fff;">走路距离</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="width:15%;">
                                            <div role="move">
                                                <a href="javascript:void(0);">
                                                    <img soperpic="消耗卡路里" src="" style="color: rgb(255,2移动2,0);">
                                                    <span soperid="消耗卡路里" style="color:#fff;">消耗卡路里</span>
                                                </a>
                                            </div>
                                        </td>
                                        <td colspan="2" style="width:15%;">
                                            <div role="move">
                                                <a href="javascript:void(0);">
                                                    <img soperpic="活跃度" src="" style="color: rgb(255,232,0);">
                                                    <span soperid="活跃度" style="color:#fff;">活跃度</span>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>-->
                                </tbody>
                                </table>
                            </td>                           
                        </tr>
                        <tr>
                            <td colspan="4" style="padding-top: 10px">
                                <button class="btn btn-block" id="showSearch">开始查询</button>
                            </td>
                        </tr>
                   
                    </tbody>

                    </table>
                </div>
            </div>
 
	</div>
<div class="content">		
	<div class="main" id="main"></div>

	<div class="div_1" id="bar1_main"></div>
	<div class="div_2" id="bar2_main"></div>
	<button class="man active">男</button>
	<button class="woman">女</button>
	
</div>
		
	</body>
		<script src="js/jquery.min.js"></script>
		<script src="js/echarts.js"></script>
		<script src="js/echarts-plain-map-geoinfo.js"></script>
		<script src="js/china.js"></script>
		<script src="js/motion.js"></script>
</html>
